<script setup>
import { defineProps } from 'vue'
import dayjs from 'dayjs'
const props = defineProps({
  seat: {
    type: Object,
    default: () => { }
  }
})

const getSeatId = () => {
  return props.seat.getSeatId ? props.seat.getSeatId() : ''
}
const getSeatStatus = () => {
  return props.seat.getStatus ? props.seat.getStatus() : ''
}
const getReservationStartTime = () => {
  if (!props.seat.getReservationStartTime) return ''
  if (props.seat.getReservationStartTime() === null) return ''
  return dayjs(props.seat.getReservationStartTime()).format('YYYY年MM月DD日 HH:mm:ss')
}
const getReservationTime = () => {
  return props.seat.getReservationTime
    ? props.seat.getReservationTime()
    : ''
}
const getReservationName = () => {
  return props.seat.getReservationName
    ? props.seat.getReservationName()
    : ''
}
</script>

<template>
  <div class="seat-status main">
    <div class="seat-status-title">
      <h3>当前座位：{{ getSeatId() }}</h3>
    </div>
    <div class="seat-status-content">
      <p>
        座位状态：<span>{{ getSeatStatus() }}</span>
      </p>
      <p>开始时间：{{ getReservationStartTime() }}</p>
      <p>预约人：{{ getReservationName() }}</p>
      <p>预约时长：{{ getReservationTime() }}</p>
    </div>
  </div>
</template>

<style>
.seat-status {
  padding: 20px;
}
</style>
